로컬스토리지와 오리진

11/5/2024

로컬스토리지

로컬스토리지는 웹 브라우저 내에 데이터를 key: value 형식으로 저장하는 웹 스토리지 API의 한 부분이다. 이 데이터는 브라우저 세션이 종료되어도 유지되며, 사용자가 명시적으로 삭제하지 않는 한 지속된다.

영구성: 브라우저를 닫아도 데이터가 사라지지 않는다.
키-값 쌍 저장: 모든 데이터는 UTF-16 문자열 형식으로 저장된다.
오리진 기반 접근: 동일한 오리진(프로토콜, 호스트, 포트 조합)에서만 데이터에 접근할 수 있다. 이는 보안상의 이유로 다른 도메인 간의 데이터 접근을 방지한다.

오리진은 URL의 프로토콜, 호스트 및 포트 조합을 의미한다. 로컬스토리지는 이 오리진을 기준으로 데이터를 격리하여 보관한다. 즉, 같은 오리진에서만 로컬스토리지에 접근할 수 있다.

오리진은 URL의 세 가지 요소로 정의된다.

이 세 요소가 모두 동일해야만 두 URL이 같은 오리진으로 간주된다.

같은 오리진:
- 동일 프로토콜, 호스트, 포트 : https://example.com/page1 → https://example.com/page2 = O
다른 오리진:
- 다른 프로토콜 : https://example.com → http://example.com = X
- 다른 호스트 : https://example.com → https://other.com = X
- 다른 포트 : https://example.com → https://example.com:8080 = X

보안 정책: 오리진은 웹 보안의 핵심인 동일 출처 정책(Same-Origin Policy)의 기반이 된다. 이 정책은 한 오리진에서 로드된 문서나 스크립트가 다른 오리진의 리소스와 상호작용하는 것을 제한한다. 이는 악성 스크립트가 다른 사이트의 민감한 데이터에 접근하지 못 하도록 막는다.
데이터 격리: 각 오리진은 독립적인 스토리지 공간을 가지며, 로컬스토리지나 세션스토리지 같은 웹 스토리지 API는 이 오리진을 기준으로 데이터를 저장한다. 따라서 다른 오리진에서는 이러한 데이터 접근할 수 없다.
신뢰 관계: 오리진은 신뢰할 수 있는 리소스를 식별하는 데 사용된다. 예를 들어, HTML 문서에서 특정 스크립트를 실행할 때 해당 스크립트의 URI를 통해 신뢰 관계를 설정한다.

오리진 비교: 두 URI가 같은 오리진인지 확인하려면 프로토콜, 호스트명, 포트 번호가 모두 일치해야 한다.
보안 강화: 프로토콜을 포함하여 오리진을 정의하는 것은 보안을 위해 필수적이다. 예를 들어, http://example.com과 https://example.com은 다른 오리진으로 간주된다.
동일 출처 정책: 이 정책은 브라우저가 한 페이지의 스크립트가 다른 페이지의 DOM에 접근하는 것을 제한하여 보안을 강화한다.
CORS(Cross-Origin Resource Sharing): 동일 출처 정책의 제한을 완화하기 위해 사용되며, 서버가 다른 오리진에서 오는 요청을 허용할 수 있도록 한다.
오리진 변경: 일부 경우에는 'document.domain'을 설정하여 오리진을 변경할 수 있지만, 이는 보안상의 이유로 권장되지 않는다.

블로그 내 관련 문서

출처 :